import React from 'react';
import { Row, Col, Form, Input, InputNumber, Select } from 'antd';
const R = require('ramda');
import BizParams from '../../../components/commons/BizParams'
import CurrencySelect from '../../../components/commons/CurrencySelect'
import PortSelect from '../../../components/commons/PortSelect'
import validator from '../../../utils/Validator'

const FormItem = Form.Item;
export default Form.create()(class DeclareInfo extends React.Component {
	constructor(props) {
		super(props);
		this.initData(props.dataSource, true);
	}

	componentWillReceiveProps(nextProps) {
		if (!R.equals(this.props.dataSource)(nextProps.dataSource)) {
			this.initData(nextProps.dataSource);
		}
	}

	initData = (dataSource, flag) => {
		dataSource = R.isNil(dataSource) ? {} : dataSource;
		let defaultShowSeaTrans = !R.isEmpty(dataSource) && dataSource.portoftransport === "1"; //海运
		let defaultShowSeaFCL = defaultShowSeaTrans && dataSource.enchasetype === "1"; //海运-整柜
		let defaultShowSeaLCL = defaultShowSeaTrans && dataSource.enchasetype === "2"; //海运-散货
		let showSeaTrans = !R.isEmpty(dataSource) && dataSource.portoftransport === "1"; //海运


		let defaultShowEmailType = !R.isEmpty(dataSource) && dataSource.cstdeclarationtype === "1"; //快递邮寄资料
		let defaultShowNoPaperType = !R.isEmpty(dataSource) && dataSource.cstdeclarationtype === "2"; //无纸化报关

		let defaultShowContractNo = !R.isEmpty(dataSource) && (dataSource.contracttype === "2" || dataSource.contracttype === "3"); //合同协议号生成方式!== 1 则显示

		if (flag) {
			this.state = {
				//综服报关
				showSeaTrans: defaultShowSeaTrans, //海运
				showSeaFCL: defaultShowSeaFCL, //海运-整柜
				showSeaLCL: defaultShowSeaLCL, //海运-散货

				//客户自行报关
				showEmailType: defaultShowEmailType, //快递邮寄资料
				showNoPaperType: defaultShowNoPaperType, //无纸化报关

				//是否合同协议号输入框
				showContractNo: defaultShowContractNo, //合同协议号生成方式!== 1 则显示


				//default value use to recover page
				//综服报关
				defaultShowSeaTrans: defaultShowSeaTrans, //海运
				defaultShowSeaFCL: defaultShowSeaFCL, //海运-整柜
				defaultShowSeaLCL: defaultShowSeaLCL, //海运-散货


				//客户自行报关
				defaultShowEmailType: defaultShowEmailType, //快递邮寄资料
				defaultShowNoPaperType: defaultShowNoPaperType, //无纸化报关

				//是否合同协议号输入框
				defaultShowContractNo: defaultShowContractNo, //合同协议号生成方式!== 1 则显示

			};
		} else {
			this.setState({
				//综服报关
				showSeaTrans: defaultShowSeaTrans, //海运
				showSeaFCL: defaultShowSeaFCL, //海运-整柜
				showSeaLCL: defaultShowSeaLCL, //海运-散货

				//客户自行报关
				showEmailType: defaultShowEmailType, //快递邮寄资料
				showNoPaperType: defaultShowNoPaperType, //无纸化报关

				//是否合同协议号输入框
				showContractNo: defaultShowContractNo, //合同协议号生成方式!== 1 则显示


				//default value use to recover page
				//综服报关
				defaultShowSeaTrans: defaultShowSeaTrans, //海运
				defaultShowSeaFCL: defaultShowSeaFCL, //海运-整柜
				defaultShowSeaLCL: defaultShowSeaLCL, //海运-散货

				//客户自行报关
				defaultShowEmailType: defaultShowEmailType, //快递邮寄资料
				defaultShowNoPaperType: defaultShowNoPaperType, //无纸化报关

				//是否合同协议号输入框
				defaultShowContractNo: defaultShowContractNo, //合同协议号生成方式!== 1 则显示

			})
		}

	}

	form = {};

	handleCollectForm = () => {
		return this.form;
	}

	handleResetFields = () => {
		this.setState({
			showSeaTrans: this.state.defaultShowSeaTrans, showSeaFCL: this.state.defaultShowPremium,
			showSeaLCL: this.state.defaultShowSeaLCL,
			showEmailType: this.state.defaultShowEmailType,
			showNoPaperType: this.state.defaultShowNoPaperType, showContractNo: this.state.defaultShowContractNo,

		});
		this.props.form.resetFields();
	}

	handleChangeContractType = (value) => {
		if (value === "1") {
			//系统生成的话，要清空手输的协议号
			this.props.form.setFieldsValue({ contractno: "" });
		};
		this.setState({ showContractNo: value !== "1" });
	}

	handleChangeDeclarationType = (value) => {
		if (value === "1") {
			//综服企业报关，清理客户报关
			this.props.form.setFieldsValue({ cstdeclarationtype: "", cstdeclarationcode: "", cstreceiver: "", cstrectelephone: "", cstdeclarationaddress: "" });//清理数据
			this.setState({ showEmailType: false, showNoPaperType: false });//隐藏元素
			//显示综服报关元素
			if (this.props.form.getFieldValue("portoftransport") === "1") {//海运
				this.setState({ showSeaTrans: true });
			}
		} else if (value === "2") {
			this.props.form.setFieldsValue({ totalvolume: "", carmodel: "", weightSea: "", weightRoad: "", plateno: "", mainfestno: "", tonnage: "", containertype: "", containerno: "", enchasetype: "", size20: "", size40: "", size45: "", sizeother: "", boxno: "", memo: "" });//清理数据
			this.setState({ showSeaFCL: false, showSeaLCL: false });//隐藏元素
		}
	}

	handleChangePortOfTransport = (value) => {

			if (value === "1") {//海运
				this.props.form.setFieldsValue({ totalvolume: "", carmodel: "", plateno: "", mainfestno: "", tonnage: "", containertype: "", containerno: "" });//清理数据
				this.setState({ showSeaTrans: true });//隐藏元素
			} else if (value === "2" || value === "3") {
				this.props.form.setFieldsValue({ totalvolume: "", carmodel: "", weightSea: "", weightRoad: "", plateno: "", mainfestno: "", tonnage: "", containertype: "", containerno: "", enchasetype: "", size20: "", size40: "", size45: "", sizeother: "", boxno: "", memo: "" });//清理数据
				this.setState({ showSeaTrans: false, showSeaFCL: false, showSeaLCL: false });//隐藏元素
			}

	}

	handleChangeEnchaseType = (value) => {
		if (value === "2") {//散柜
			//清理整柜
			this.props.form.setFieldsValue({ size20: "", size40: "", size45: "", sizeother: "", boxno: "" });//清理数据
			this.setState({ showSeaFCL: false, showSeaLCL: true });//隐藏元素
		} else {
			this.setState({ showSeaFCL: true, showSeaLCL: false });//隐藏元素
		}
	}


	handleChangeCstDeclarationType = (value) => {
		if (value === "1") {//快递寄资料
			//清理无纸化报关
			this.props.form.setFieldsValue({ cstdeclarationcode: "" });//清理数据
			this.setState({ showNoPaperType: false, showEmailType: true });//隐藏元素
		} else if (value === "2") {//无纸化
			//清理快递寄资料
			this.props.form.setFieldsValue({ cstreceiver: "", cstrectelephone: "", cstdeclarationaddress: "" });//清理数据
			this.setState({ showEmailType: false, showNoPaperType: true });//隐藏元素
		}
	}

	handleChangeCurrency = (value) => {
		if (this.props.handleChangeCurrencyType) {
			this.props.handleChangeCurrencyType(value);
		}
	}

	handleGetCurrencyType = () => {
		return this.props.form.getFieldValue("currencytype");
	}

	checkDeclareInfo = () => {
		let flag = true;
		this.props.form.validateFields({ force: true }, (errors, values) => {
			if (errors) {
				flag = false
			} else {
				let temp = R.omit(['weightRoad', 'weightSea'])(values);
				let weight = undefined;
				if (this.state.showSeaTrans) {
					weight = values.weightSea;
				}
				temp.weight = weight;
				this.form = temp;
			}
		})
		return flag;
	};

	render() {
		let dataSource = R.isNil(this.props.dataSource) ? {} : this.props.dataSource;
		const { getFieldDecorator } = this.props.form;
		let formItemLayout = {
			labelCol: { xs: { span: 8 }, sm: { span: 8 } },
			wrapperCol: { xs: { span: 15 }, sm: { span: 14 } }
		};
		const formItemLayout2 = {
			labelCol: { span: 4 },
			wrapperCol: { span: 18 }
		};
		let disabledContracttype = [];
		let customer = R.isNil(this.props.customer) ? {} : this.props.customer;
		if (customer.csttype === "2") disabledContracttype = ['2', '3'];
		return (
			<Form>
				<Row>
					<Col span={12}>
						<FormItem {...formItemLayout} label="报关币种" hasFeedback>
							{getFieldDecorator('currencytype', {
								rules: [{
									required: true, message: '请选择报关币种'
								}],
								initialValue: dataSource.currencytype
							})(
								<CurrencySelect disabled={this.props.disabled} onChange={this.handleChangeCurrency.bind(this)} />
								)}
						</FormItem>
					</Col>
					<Col span={12}>
						<FormItem {...formItemLayout} label="报关口岸" hasFeedback>
							{getFieldDecorator('portofentryid', {
								rules: [{
									required: true, message: '请选择报关口岸'
								}],
								initialValue: dataSource.portofentryid
							})(
								<PortSelect disabled={this.props.disabled} />
								)}
						</FormItem>
					</Col>
				</Row>
				<Row>
					<Col span={12}>
						<FormItem {...formItemLayout} label="协议号生成方式" hasFeedback>
							{getFieldDecorator('contracttype', {
								rules: [{
									required: true, message: '请选择合同协议号生成方式'
								}],
								initialValue: dataSource.contracttype
							})(
								<Select disabled={this.props.disabled} allowClear onChange={this.handleChangeContractType.bind(this)}>
									<Select.Option value="1">系统生成</Select.Option>
									<Select.Option value="2">手动录入</Select.Option>
								</Select>
								)}
						</FormItem>
					</Col>
					<Col span={12} style={{ display: this.state.showContractNo ? "inline-block" : "none" }}>
						<FormItem {...formItemLayout} label="报关协议号" hasFeedback>
							{getFieldDecorator('contractno', {
								rules: [{
									required: this.state.showContractNo, message: '请输入报关协议号'
								}],
								initialValue: dataSource.contractno
							})(
								<Input maxLength="30" disabled={this.props.disabled} />
								)}
						</FormItem>
					</Col>
				</Row>
				<Row>
					<Col span={12}>
						<FormItem {...formItemLayout} label="运输方式" hasFeedback>
							{getFieldDecorator('portoftransport', {
								rules: [{
									required: true, message: '请选择运输方式'
								}],
								initialValue: dataSource.portoftransport
							})(
								<BizParams disabled={this.props.disabled} sprCode='portoftransport' onChange={this.handleChangePortOfTransport.bind(this)} />
								)}
						</FormItem>
					</Col>
				</Row>
				{/*综服报关-海运 begin -------------------------------*/}
				<Row>
					<Col span={12} style={{ display: this.state.showSeaTrans ? "inline-block" : "none" }}>
						<FormItem {...formItemLayout} label="装箱方式" hasFeedback>
							{getFieldDecorator('enchasetype', {
								rules: [{
									required: this.state.showSeaTrans, message: '请选择装箱方式'
								}],
								initialValue: dataSource.enchasetype
							})(
								<BizParams disabled={this.props.disabled} sprCode='enchasetype' onChange={this.handleChangeEnchaseType.bind(this)} />
								)}
						</FormItem>
					</Col>
					<Col span={12} style={{ display: this.state.showSeaTrans ? "inline-block" : "none" }}>
						<FormItem {...formItemLayout} label="过磅重量" hasFeedback>
							{getFieldDecorator('weightSea', {
								rules: [{
									pattern: validator.DECIMAL2.pattern, message: validator.DECIMAL2.message,
								}],
								initialValue: dataSource.weight
							})(
								<InputNumber disabled={this.props.disabled} min={0} max={9999999999999999} />
								)}
							kg
						</FormItem>
					</Col>
				</Row>
				{/*综服报关-海运 end   -------------------------------*/}
				{/*综服报关-海运-整柜 begin -------------------------------*/}
				<Row>
					<Col span={12} style={{ display: this.state.showSeaFCL ? "inline-block" : "none" }}>
						<FormItem {...formItemLayout} label="20尺柜" hasFeedback>
							{getFieldDecorator('size20', {
								initialValue: R.isNil(dataSource.size20) ? undefined : dataSource.size20
							})(
								<InputNumber disabled={this.props.disabled} min={0} max={99999999999} precision={0} />
								)}
							个
						</FormItem>
					</Col>
					<Col span={12} style={{ display: this.state.showSeaFCL ? "inline-block" : "none" }}>
						<FormItem {...formItemLayout} label="40尺柜" hasFeedback>
							{getFieldDecorator('size40', {
								initialValue: R.isNil(dataSource.size40) ? undefined : dataSource.size40
							})(
								<InputNumber disabled={this.props.disabled} min={0} max={99999999999} precision={0} />
								)}
							个
						</FormItem>
					</Col>
				</Row>
				<Row>
					<Col span={12} style={{ display: this.state.showSeaFCL ? "inline-block" : "none" }}>
						<FormItem {...formItemLayout} label="45尺柜" hasFeedback>
							{getFieldDecorator('size45', {
								initialValue: R.isNil(dataSource.size45) ? undefined : dataSource.size45
							})(
								<InputNumber disabled={this.props.disabled} min={0} max={99999999999} precision={0} />
								)}
							个
						</FormItem>
					</Col>
					<Col span={12} style={{ display: this.state.showSeaFCL ? "inline-block" : "none" }}>
						<FormItem {...formItemLayout} label="其他柜型" hasFeedback>
							{getFieldDecorator('sizeother', {
								initialValue: R.isNil(dataSource.sizeother) ? undefined : dataSource.sizeother
							})(
								<InputNumber disabled={this.props.disabled} min={0} max={99999999999} precision={0} />
								)}
							个
						</FormItem>
					</Col>
				</Row>

				<Row>
					<Col span={23} style={{ display: this.state.showSeaFCL ? "inline-block" : "none" }}>
						<FormItem {...formItemLayout2} label="集装箱号" hasFeedback>
							{getFieldDecorator('boxno', {
								initialValue: dataSource.boxno
							})(
								<Input disabled={this.props.disabled} maxLength="1000" placeholder="多个柜号则用逗号隔开" />
								)}
						</FormItem>
					</Col>
				</Row>
				{/*综服报关-海运-整柜 end   -------------------------------*/}

				{/*客户报关 begin -------------------------------*/}
				<Row>
					<Col span={12}>
						<FormItem {...formItemLayout} label="报关方式" hasFeedback>
							{getFieldDecorator('cstdeclarationtype', {
								rules: [{
									required: true, message: '请选择报关方式'
								}],
								initialValue: dataSource.cstdeclarationtype
							})(
								<BizParams disabled={this.props.disabled} sprCode='cstdeclarationtype' onChange={this.handleChangeCstDeclarationType.bind(this)} />
								)}
						</FormItem>
					</Col>
					<Col span={12} style={{ display: this.state.showEmailType ? "inline-block" : "none" }}>
						<FormItem {...formItemLayout} label="收件地址" hasFeedback>
							{getFieldDecorator('cstdeclarationaddress', {
								rules: [{
									required: this.state.showEmailType, message: '请输入报关资料收件地址'
								}],
								initialValue: dataSource.cstdeclarationaddress
							})(
								<Input disabled={this.props.disabled} maxLength="100" />
								)}
						</FormItem>
					</Col>
					<Col span={12} style={{ display: this.state.showNoPaperType ? "inline-block" : "none" }}>
						<FormItem {...formItemLayout} label="报关行代码" hasFeedback>
							{getFieldDecorator('cstdeclarationcode', {
								rules: [{
									required: this.state.showNoPaperType, message: '请输入10位报关行代码'
								}],
								initialValue: dataSource.cstdeclarationcode
							})(
								<Input disabled={this.props.disabled} maxLength="20" />
								)}
						</FormItem>
					</Col>
				</Row>
				<Row>
					<Col span={12} style={{ display: this.state.showEmailType ? "inline-block" : "none" }}>
						<FormItem {...formItemLayout} label="收件人姓名" hasFeedback>
							{getFieldDecorator('cstreceiver', {
								rules: [{
									required: this.state.showEmailType, message: '请输入收件人姓名'
								}],
								initialValue: dataSource.cstreceiver
							})(
								<Input disabled={this.props.disabled} maxLength="20" />
								)}
						</FormItem>
					</Col>
					<Col span={12} style={{ display: this.state.showEmailType ? "inline-block" : "none" }}>
						<FormItem {...formItemLayout} label="收件人电话" hasFeedback>
							{getFieldDecorator('cstrectelephone', {
								rules: [{
									required: this.state.showEmailType, message: '请输入收件人电话'
								}],
								initialValue: dataSource.cstrectelephone
							})(
								<Input disabled={this.props.disabled} maxLength="20" />
								)}
						</FormItem>
					</Col>
				</Row>
				{/*客户自行报关 end   -------------------------------*/}
			</Form>
		)
	}
})